<template>
  <a-form :model="seoFormState" name="advanced_search" autoComplete="off" style="min-height:300px" ref="seoFormRef">
    <template v-for="(item, index) in seoFormState">
      <div class="basic-item">
        <component :is="comps[item.componentName]" :index="index" :element="item" v-if="item"
          :formNamePath="[index, 'value']" />
      </div>
    </template>
  </a-form>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, } from 'vue'
import { comps } from '@/components/draggable/exportComp'
import { dataSourceType, detailDataItemType } from "@/type.d";
const props = defineProps({
  seoFormState: {
    type: Array,
    default: []
  },
  isVisibleObj: {
    type: Object,
    default: {}
  },
  addModelSelection: {
    type: Array,
    default: []
  },
  contentModelList: {
    type: Array,
    default: []
  }
})

//data

const seoFormState = ref<any[]>(props.seoFormState)
const seoFormParam = reactive({ seo: '' })
const seoFormRef = ref<any>(null)
let isVisibleObj = reactive<any>(props.isVisibleObj)
watch(() => props.seoFormState, (newVal, oldVal) => {
  seoFormState.value = JSON.parse(JSON.stringify(newVal));
  seoFormState.value.forEach((ue_list: any) => {
    ue_list.rule.validator = new Function(
      "return " + ue_list.rule.validator
    )();
  })
}, { deep: true })
watch(() => seoFormState.value, (newVal, oldVal) => {
  let obj: dataSourceType = {}
  newVal.length && newVal.forEach((item: dataSourceType) => {
    obj[item.param] = item.value
  })
  seoFormParam.seo = JSON.stringify(obj)
}, { deep: true })

watch(() => props.addModelSelection, (newVal, oldVal) => {
  let obj: dataSourceType = {}
  seoFormState.value.length && seoFormState.value.forEach((item: dataSourceType) => {
    if (item.param === 'contentModelTpls') {
      //let selectList = 
      item.value = props.contentModelList.length && props.contentModelList.filter((item: any) => (newVal.includes(item.id))) || []
      item.value && item.value.forEach((item: any) => item.selected = true)
    }
    obj[item.param] = item.value
  })
  seoFormParam.seo = JSON.stringify(obj)
}, { deep: true })

watch(() => props.isVisibleObj, (newVal, oldVal) => {
  let obj: dataSourceType = {}
  seoFormState.value.length && seoFormState.value.forEach((item: dataSourceType) => {
    if (item.param === 'contentModelTpls') {
      item.isVisible = newVal.isVisible
    }
    obj[item.param] = item.value
  })
  seoFormParam.seo = JSON.stringify(obj)
}, { deep: true })
watch(() => seoFormState.value, (newVal, oldVal) => {
  let obj: dataSourceType = {}
  newVal.length && newVal.forEach((item: dataSourceType) => {

    if (item.param === 'contentModelTpls') {
      isVisibleObj.isVisible = item.isVisible
    }
    obj[item.param] = item.value
  })
  seoFormParam.seo = JSON.stringify(obj)
}, { deep: true })
defineExpose({ seoFormParam, seoFormRef });
</script>

<style lang="scss" scoped>
.basic-item {
  margin-top: 24px;
  margin-left: 86px;
}

::v-deep(.ant-form-item-label) {
  width: 140px;
}

::v-deep(.ant-input:placeholder-shown) {
  // width: 304px;
}
</style>
